我有一段简单的HTML。为什么背景颜色没有填满整个#footer元素的背景——具体来说，包括边距？#footer{background:#263238;margin:100px;padding:0;}.footer-text{margin:0;color:#fff;}AllRightsReserved©2016 最佳答案 您应该使用padding而不是CSS的BoxModel描述的margin.边距提供超出元素框的空间，因此不会被着色——它只是空间。另一方面，内边距在元素框的内部周围提供空间，并带有颜色并受其他样式影响。#foote

众所周知，Outlook2007使用Word2007呈现引擎，在设计HTML电子邮件时造成无尽的痛苦。[在这里插入咆哮]特别是，float、边距和填充是——我们可以说吗？-支持不佳。要模拟float以便文本环绕图像，显然我们可以简单地使用:问题是填充/边距。没有填充/边距，包裹的文本与看起来很傻的图像相抵触。一种解决方法是编辑图像并添加模拟边距的透明框架。有人知道其他解决方法吗？ 最佳答案 阅读Microsoft关于Outlook2007支持的文档后，我发现在图像上使用hspace可以在图像周围创建类似于填充的空白区域。[imgsr

这个问题在这里已经有了答案:CSS100%heightwithpadding/margin(15个答案)关闭2年前。我有一个盒子#box，宽度:100%，高度:100%，填充:5px，边距:5px；边框:5px；我需要在HTML5布局中正确显示它。现在我有了:但我需要在body区域安装block。代码:body,html{width:100%;height:100%;margin:0;}#box{width:100%;height:100%;border:5pxsolidred;padding:15px;margin:20px;}Textwillbehere

我有一个设置了灵活宽度的DIV，例如最小宽度:800像素和最大宽度:1400像素。在这个DIV中，有很多固定宽度200px和display:inline-block的盒子。因此，根据父DIV的宽度，这些框会填满整个空间。我的问题是右侧的空白是由父div的可变宽度引起的。有时这个空白很小，看起来很好，但是随着父div的宽度不同，这个空白将近200px。我不知道，如果我把我的问题描述的足够详细，我希望这张图能帮助描述我的实际情况:这就是我想要的:使用TABLE可以轻松实现此自动边距。但是，我不知道确切的列数，因为它取决于用户的屏幕分辨率。所以我不能使用表格，而是坚持使用CSS。有人知道如何

我有点困惑为什么bootstrap不会对列应用左右边距，我想要的只是一个简单的行，其中有3列，彼此之间的水平边距大约为20px。如果尝试执行该Bootstrap，只需将其中一个div剪辑到下一行。htmlBox1Box1Box1CSS.col-md-4{background-color:tomato;margin:20px5px;} 最佳答案 列的左右边距会破坏Bootstrap的网格行为。不要修改Bootstrap的类。添加您的自己的类(class)。在你的例子中多放一个在列中。并给它一个margin。HTMLBox1Box1Bo

根据我对CSS规范的理解，段落上方或下方的表格应该折叠垂直边距。然而，这并没有发生在这里:table{margin:100px;border:solidred2px;}p{margin:100px}Thisisaone-celledtablewith100pxmarginallaround.Thisisaparagraphwith100pxmarginallaround.我原以为两个元素之间会有100像素，但实际上有200像素——边距没有折叠。为什么不呢？编辑:这似乎是表格的错误:如果我复制表格并复制段落，这两个段落将折叠边距。两张表不会。而且，如上所述，表格不会折叠段落的边距。这是合

我有这种(简化的)情况:texttext和:.page-content{padding:020px;}.page-contentimg{display:block;margin:0auto;max-width:100%;}这样，我的.page-content中总是有一个填充div(其中包含的内容比我在这里复制的要多得多)。图片不能超过页面宽度减去内边距。它适用于任何屏幕尺寸。示例:但是，我想在手机屏幕上将图像设为全Angular(绕过父20像素的内边距)。即:如果父级()有负边距(margin:0-20px;)，我可以解决我的问题，但html文件是由Jekyll从Markdown文件生

这个问题在这里已经有了答案:WhyaremydivmarginsoverlappingandhowcanIfixit?(5个答案)关闭9年前。最近我遇到了边距问题，但我无法解决它。我的HTML看起来像这样:Sometext...CSS:.info-box{border-radius:5px;border:1pxsolidred;margin-bottom:20px;}.form{margin-top:20px;}问题是边距彼此重叠，而不是在两个元素之间给出40像素的距离。我的问题是:为什么？我发现添加到.info-boxoverflow:hidden解决了这个问题，但也许有更好的方法？

为了解决我一直遇到的问题，我一直在阅读关于flex-boxes的资料。我阅读/用作问题研究的主要文章是this.我最近在this中提出了这个话题和this问题并感谢@Michael_B的帮助,已经制定了如何将一个元素(在本例中为)置于flex盒子的中心，只要flex盒子中始终只有三个flex元素(在这种布局中:).我想扩展这些要点，因为我意识到可能有一个解决方案可以解决总flex元素多于或(更现实地)少于3个的情况。它涉及使用边距。如果你使用margin:auto;在flex元素上，它使元素在主轴上居中(有关flex盒的工作原理，请参见下图)。img{width:100%;height

这看起来像是webkit中的文本换行错误，还是我遗漏了什么？DOM:noseatakimatasanctusestestestLorem...CSS:div{width:200px;}p{margin-right:32px;padding-left:30px;}img{float:left;margin-left:-30px;}演示:http://jsbin.com/onoced/1/edit截图: 最佳答案 正如您所指出的，我不会说这是一个错误:它在WebKit浏览器中的行为相同。否则我们必须将浏览器引擎之间的每一个差异都归类为错